<template>

  <main class="content">
    <buttons v-model:startTime="monthObj.yearMonthStart" v-model:endTime="monthObj.yearMonthEnd" @confirm="confirm"
      key="1" type="quarter" />
    <card title="续期实收保费(万元)">
      <div class="num-box">
        {{pageData.actuPrem || '0.00'}}
        <van-progress v-if="pageData.actuPremRate" :percentage="pageData.actuPremRate" class="num-progress"
          color="var(--van-primary-color2)" layer-color="#ebedf0" stroke-width="20"
          :show-pivot="false">123</van-progress>
      </div>
    </card>
    <card title="分公司续期实收保费(万元)">
      <tableCom :data="pageData.companyPrem" :columns="pageData.companyColumns">
        <template #ratio="{row,$index}">
          <div class="progress-box">
            <van-progress class="progress-self" :percentage="row.ratio" :show-pivot="false"
              color="var(--van-primary-color)" layer-color="#ebedf0" stroke-width="18" />
          </div>
        </template>
        <template #rate="{row,$index}">
          <div class="rang-text-box">
            <van-circle v-model:current-rate="row.rate" :rate="row.rate" stroke-width="180" size="22"
              stroke-linecap="square" layer-color="#ebedf0" color="var(--van-primary-color2)" class="little-circle" />
            <span style="font-size: 12px;color: #C4C4C4;margin-left: 5px;">{{row.rate || '0.00'}}%</span>
          </div>
        </template>
      </tableCom>
    </card>
    <card title="渠道实收保费(万元)">
      <tableCom :data="pageData.salePrem" :columns="pageData.saleColumns">
        <template #ratio="{row,$index}">
          <div class="progress-box">
            <van-progress class="progress-self" :percentage="row.ratio" :show-pivot="false"
              color="var(--van-primary-color)" layer-color="#ebedf0" stroke-width="18" />
          </div>
        </template>
        <template #rate="{row,$index}">
          <div class="rang-text-box">
            <van-circle v-model:current-rate="row.rate" :rate="row.rate" stroke-width="180" size="22"
              stroke-linecap="square" layer-color="#ebedf0" color="var(--van-primary-color2)" class="little-circle" />
            <span style="font-size: 12px;color: #C4C4C4;margin-left: 5px;">{{row.rate || '0.00'}}%</span>
          </div>
        </template>
      </tableCom>
    </card>
  </main>

</template>

<script setup name="premium">
import { ref, reactive, onMounted, computed, nextTick } from "vue";
import card from "../../../components/card.vue";
import tableCom from "../../../components/tableCom.vue";
import buttons from "../../../components/buttons.vue";
import mockApi from "../../../api/api.js";
const queryPamas = ref({
  btnVal: "1",
  time: "2023-02",
});
const columns = [
  {
    title: "保费占比",
    key: "ratio",
    slot: "ratio",
  },
  {
    title: "保费(万元)",
    key: "actuPrem",
    width: "70",
    formatter(val) {
      return val.toFixed ? val.toFixed(2) : val || "0.00";
    },
  },
];

const monthObj = ref({
  yearMonthStart: "",
  yearMonthEnd: "",
});

const pageData = ref({
  actuPrem: "",
  actuPremRate: 0,
  companyPrem: [],
  companyColumns: [
    {
      title: "业务单位",
      key: "comCodeName",
      width: "60",
    },
  ],
  salePrem: [],
  saleColumns: [
    {
      title: "渠道",
      key: "saleName",
      width: "60",
    },
  ],
});
function confirm(val, btn) {
  console.log(monthObj.value);
  let obj = {
    comCode: "86",
    ...monthObj.value,
  };
  mockApi.actuPremQuery(obj).then((res) => {
    // console.log(res);
    if (res.code == 200) {
      if (!res.data) {
        res.data = {
          actuPrem: 0,
          actuPremRate: 0,
          companyPrem: [],
          salePrem: [],
        };
      }
      pageData.value = Object.assign(pageData.value, res.data);
      nextTick(() => {
        if (pageData.value.actuPremRate) {
          let dom = document.querySelector(".num-progress")?.children[0];
          let actuPremRate = pageData.value.actuPremRate;
          // actuPremRate = actuPremRate > 100 ? 100 : actuPremRate;
          dom.innerHTML = actuPremRate + "%";
        }
      });
      ["company", "sale"].forEach((key) => {
        if (pageData.value[key + "Columns"].length == 1) {
          pageData.value[key + "Columns"].push(...columns);
        }
        if (
          pageData.value[key + "Prem"].some((item) => item.rate) &&
          !pageData.value[key + "Columns"].some((item) => item.key == "rate")
        ) {
          pageData.value[key + "Columns"].push({
            title: "进度率",
            key: "rate",
            slot: "rate",
            width: "70",
          });
        }
      });
    }
  });
  // console.log(pageData.value);
}
</script>

<style scoped lang="less">
.content {
  width: 100vw;
  padding-bottom: 20px;
  .num-box {
    width: 100%;
    padding: 20px 0;
    text-align: center;
    font-size: 36px;
    font-weight: 600;
    color: var(--van-primary-color);
    .num-progress {
      width: 65%;
      border-radius: 25px;
      margin-left: 50%;
      transform: translateX(-50%);
      overflow: hidden;
      :deep(.van-progress__portion) {
        font-size: 14px;
        max-width: 100%;
        text-align: right;
        color: #fff;
        padding-right: 10px;
        box-sizing: border-box;
        line-height: 20px;
      }
    }
  }
}
.progress-box {
  padding-bottom: 8px;
  box-sizing: border-box;
  .progress-self {
    border-radius: 25px;
    transform: translateY(2px);
  }
}
.rang-text-box {
  position: relative;
  display: flex;
  align-items: center;
  width: 70px;
  height: 24px;
}
</style>